<template>
    <el-tree ref="deptTreeRef" :data="dept.list" :props="defaultProps" @node-click="handleNodeClick" node-key="id"
        :highlight-current="true" default-expand-all :expand-on-click-node="false" />
</template>

<script setup lang='ts'>
import { onMounted, ref, reactive } from 'vue'
import { ElTree } from 'element-plus'

import { getDeptApi } from '@/http/api/department'

// 调用父组件方法
const emit = defineEmits(['clickDept'])

// 点击部门树
const handleNodeClick = (data: any) => {
    emit('clickDept', data.id)
}
// 部门树
const deptTreeRef = ref<InstanceType<typeof ElTree>>()
const dept = reactive({
    list: [{ id: null, label: '所有员工', children: [] }]
})
const defaultProps = {
    children: 'children',
    label: 'label',
}

onMounted(() => {
    getDeptApi().then(res => {
        if (res && res.code == 200) {
            dept.list[0].children = res.data
        }
    })
})
</script>

<style scoped lang='scss'>
</style>